<template>
  <div class="container-box">
    <section>
      <el-form ref="queryForm" :model="queryParams" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="关键词" prop="fileName" label-width="60px">
              <el-input
                v-model="queryParams.queryParam"
                placeholder="请输入关键词"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="发文日期" prop="sendTime">
              <!-- <el-date-picker
                type="date"
                placeholder="请选择发文日期"
                v-model="queryParams.sendTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                size="small"
              ></el-date-picker> -->

              <el-date-picker
                v-model="queryParams.queryTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="20px">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row> </el-row>
      </el-form>
      <el-table
        v-loading="dataLoading"
        :data="tableData"
        style="width: 100%"
        @expand-change="expandChange"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-card class="inner-card">
            <el-table
              :data="childrenTableData"
              style="width: 100%"
              class="inner-table"
              v-loading="loading"
              element-loading-text="文件下载中"
            >
              <el-table-column label="文件名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.fileName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="approvalNo" label="批准编号">
              </el-table-column>
              <el-table-column prop="approvalOffice" label="批准机关">
              </el-table-column>
              <el-table-column prop="determineThing" label="确定事项" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="fileName" label="预览文件">
                <template slot-scope="scope">
                  <a
                    @click="handleDownFile(scope.row)"
                    style="color: #4e86ff; cursor: pointer"
                    >{{ scope.row.fileName }}</a
                  >
                </template>
              </el-table-column>
              <el-table-column prop="sendTime" label="发文时间">
              </el-table-column>
            </el-table>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column label="文件名称" prop="fileName"> </el-table-column>
        <el-table-column label="确定事项" prop="determineThing" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="60px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)"
              >管理</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </section>
    <!--PDF 预览-->
    <el-dialog
      title="PDF 预览"
      :visible.sync="viewVisible"
      width="60%"
      center
      @close="closeDialog"
    >
      <div>
        <el-button
          style="margin-left: 10px; margin-bottom: 15px"
          type="primary"
          size="small"
          @click="downloadPdf"
        >
          下载文件
        </el-button>
        <span style="float: right; margin-bottom: 15px"
          ><el-button type="primary" size="small" @click.stop="previousPage">
            上一页
          </el-button>
          <el-button type="primary" size="small" @click.stop="nextPage">
            下一页
          </el-button>
          <span>当前第{{ pdfPage }}页 / 共{{ pageCount }}页</span></span
        >
      </div>

      <div>
        <pdf
          :src="src"
          :page="pdfPage"
          @num-pages="pageCount = $event"
          @page-loaded="pdfPage = $event"
          style="display: inline-block; width: 100%"
        ></pdf>
      </div>
    </el-dialog>

    <el-dialog
      :title="fileTitle"
      :visible.sync="fileVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="fileForm" :model="fileForm" label-width="80px">
        <el-form-item label="文件名称" prop="approvalNo">
          <el-input
            v-model="fileForm.fileName"
            placeholder="上传文件时自动获取文件名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="批准编号" prop="approvalNo">
          <el-input
            v-model="fileForm.approvalNo"
            placeholder="请输入批准编号"
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="批准机关" prop="approvalOffice">
          <el-input
            v-model="fileForm.approvalOffice"
            placeholder="请输入批准机关"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="调整事项" prop="determineThing">
          <el-input
            v-model="fileForm.determineThing"
            placeholder="请输入调整事项"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="发文日期" prop="sendTime">
          <el-date-picker
            type="date"
            placeholder="请选择发文日期"
            v-model="fileForm.sendTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitFileForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="fileVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  downloadPlanFile,
  getPlanFilePage,
  updatePlanFile,
} from "@/api/modules/plans";
import pdf from "vue-pdf";
export default {
  name: "searching",
  components: { pdf },
  data() {
    return {
      tableData: [],
      pdfBlob: "",
      queryParams: {
        queryParam: "",
        pageNum: 1,
        pageSize: 20,
        queryTime: [],
      },
      total: 0,
      childrenTableData: [],
      expands: [],
      getRowKeys(row) {
        return row.id;
      },
      //PDF预览
      viewVisible: false,
      src: null,
      pdfPage: 1,
      pageCount: 0,
      fileTitle: "机构编制事项变动情况详情单",
      fileVisible: false,
      fileForm: {
        fileName: "",
        approvalNo: "",
        approvalOffice: "",
        sendTime: "",
        fileType: "",
        tempVersionId: "",
        planId: "",
        determineThing: "",
      },
      loading: false,
      pdfFilePath: "",
      pdfFileName: "",
      dataLoading: false
    };
  },
  created() {
    this.getPlanFilePage();
  },
  methods: {
    downloadPdf() {
      downloadPlanFile({ filePath: this.pdfFilePath }).then((res) => {
        let blob = new Blob([res]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = this.pdfFileName; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        this.loading = false;
        if (res.success) {
          this.$message.success("文件下载成功");
        }
      });
    },
    //PDF预览
    previewPDF(url) {
      this.src = pdf.createLoadingTask(url);
      this.viewVisible = true;
    },

    //关闭窗口初始化PDF页码
    closeDialog() {
      this.pdfPage = 1;
    },

    //PDF改变页数
    previousPage() {
      var p = this.pdfPage;
      p = p > 1 ? p - 1 : this.pageCount;
      this.pdfPage = p;
    },
    nextPage() {
      var p = this.pdfPage;
      p = p < this.pageCount ? p + 1 : 1;
      this.pdfPage = p;
    },
    getPlanFilePage() {
      this.dataLoading = true
      getPlanFilePage(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.dataLoading = false
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getPlanFilePage();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getPlanFilePage();
    },
    handleEdit(row) {
      this.fileVisible = true;
      this.fileForm = JSON.parse(JSON.stringify(row));
    },
    submitFileForm() {
      this.fileVisible = false;
      if (this.fileForm.id) {
        updatePlanFile(this.fileForm).then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功");
            this.getPlanFilePage();
            this.expands = [];
          }
        });
      }
    },
    handleDownFile(row) {
      if (
        row.fileName.indexOf("pdf") !== -1 ||
        row.fileName.indexOf("PDF") !== -1
      ) {
        this.pdfFilePath = row.filePath;
        this.pdfFileName = row.fileName;
        downloadPlanFile({ filePath: row.filePath }).then((res) => {
          let blob = new Blob([res], { type: "application/pfd" });
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          this.previewPDF(href);
        });
      } else {
        this.loading = true;
        downloadPlanFile({ filePath: row.filePath }).then((res) => {
          let blob = new Blob([res]);
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = row.fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          this.loading = false;
          if (res.success) {
            this.$message.success("文件下载成功");
          }
        });
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
      this.getPlanFilePage();
    },
    resetQuery() {
      this.queryParams = {};
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
      };
      this.getPlanFilePage();
    },
    expandChange(row, expandedRows) {
      var that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          if (expandedRows.length > 1) {
            expandedRows = expandedRows.splice(
              expandedRows.length - 1,
              expandedRows.length
            );
          }
          that.childrenTableData = expandedRows;
          that.expands.push(row.id); // 每次push进去的是每行的ID
        }
      } else {
        that.expands = []; // 默认不展开
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container-box {
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  .area {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
<style>
.inner-table .el-table__cell {
  background-color: #2e31ca0d;
}
.search_area .el-form-item {
  margin-bottom: 0;
}
</style>
